<template>
     <!-- 弹出框 -->
     <el-dialog v-model="store.state.homeview.changePerDialog" title="编辑信息">
        <el-form :model="store.state.homeview.userForm">
            <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.userForm.id" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="用户" :label-width="formLabelWidth">
                <el-input v-model="store.state.homeview.userForm.name" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="权限" :label-width="formLabelWidth">
                <el-checkbox-group v-model="checkbox" size="small">
                    <el-checkbox label="成员变更" size="large" border :key="Math.random()" />
                    <el-checkbox label="用户权限管理" size="large" border :key="Math.random()" />
                    <el-checkbox label="住户信息修改" size="large" border :key="Math.random()" />
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handlecancel">取消</el-button>
                <el-button type="primary" @click="handelsubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
// 引用useStore
import { useStore } from "vuex";
// 引入饿了么ui的弹出框
import { ElMessage, } from 'element-plus'
import { ref,watch } from "vue";
import link from '@/api/apis';
// 得到store对象
const store = useStore();
const formLabelWidth = '140px'
//复选框组值
const checkbox = ref([])
//模拟触发父组件自定义事件，达到更改后刷新列表目的
const emit = defineEmits(['GetPerList'])
//取消修改
const handlecancel = () => {
     // 关闭弹窗
    store.commit('SET_USERDIALOG')
    ElMessage({
        type: 'info',
        message: '已取消！',
    })
}
const handelsubmit=()=>{
    
    console.log(555,store.state.homeview.userForm);
    let arr: any = []
    if (checkbox.value.length == 3) {
        arr = ['所有权限']
    } else {
        for (let item in checkbox.value) {
            console.log(checkbox.value[item]);
            arr.push(checkbox.value[item])
        }
    }
    console.log(arr);
    store.commit('ChangrPer', arr)
    // store.commit('SET_USERDIALOG')
    link(`/register/${store.state.homeview.userForm.id}`, 'put', store.state.homeview.userForm).then(res => {
        console.log(res);
        if (res.status === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功！',
            })

            emit('GetPerList')
        } else {
            ElMessage({
                type: 'error',
                message: '修改失败！',
            })
        }
        // 关闭弹窗
        store.commit('SET_USERDIALOG')
    })
}
//监听编辑框显示状态
watch(
    () => store.state.homeview.changePerDialog,
    () => {
        checkbox.value = store.state.homeview.userForm.power[0] == '所有权限' ? ["成员变更", "用户权限管理", "住户信息修改"] : store.state.homeview.userForm.power
    }
)
</script>

<style scoped>

</style>